<template>
	<!-- <view> 这是home页面</view> -->
	<view class="box">
		<!-- 搜索表头 -->
		<view class="head">
			<view class="tops">
				<image class="inco-l" src="../../static/icons/search.png"></image>
				<image @click="gocar" class="inco-r" src="../../static/icons/cart.png"></image>
			</view>
		</view>
		<!-- 轮播 -->
		<view class="banner">
			<swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
				<swiper-item v-for="item in bannerList" :key="item.id">
					<view class="swiper-item uni-bg-red">
						<image class="img" :src="item.pic" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		 <!-- 中间的创意 -->
		 <view class="section">
			 <view class="sec-item" v-for="item in categoryList" :key="item.id" @click="gosection(item.id)" >
				 <image :src="item.icon" mode=""></image>
				 <view>{{item.name}}</view>
			 </view>
		 </view>
		 <!-- 小喇叭限时活动 纵向不会动 是没有设高度吗 -->
		 <view class="time">
			 <view class="time-t">
				 <image src="../../static/icons/notify.png" mode=""></image>
			 </view>
			 <view class="tiem-c">限时活动:</view>
			 <view class="time-b">
				<swiper class="swiper" :vertical="vertical" :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item @click="gogoods(item.productId)" class="item" v-for="(item,index) in recommend" :key="index">
				        <view class="swiper-item uni-bg-red" >
							<view class="item-name">{{item.name}}</view>
							<view class="item-price">
								<view class="pric">{{item.price}}元</view>
								<view class="promotion">现价:{{item.promotionPrice}}元</view>
							</view>
						</view>
				    </swiper-item>
				</swiper>
			 </view>
		 </view>
		 <!-- 热门推荐  还有轮播没有弄好-->
		<view class="hot">
			<view class="hot-head">热门推荐</view>
			<view class="hot-content">
				<swiper class="swiper" display-multiple-items="3"  :autoplay="autoplay" :interval="interval" :duration="duration">
					<swiper-item class="head" @click="gogoods(item.id)" v-for="item in hot" :key="item.id">
						<view class="swiper-item uni-bg-red" >
							<view class="imag">
								<image :src="item.pic"></image>
							</view>
							<view class="name">{{item.name}}</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			
		</view>
		<!-- 新品推荐 -->
		<view class="product">
			<view class="product-head">新品推荐</view>
			<view class="new">
				<swiper class="swiper" next-margin="50px">
					<swiper-item @click="gogoods(item.id)"  v-for="item in LatestProducts" :key="item.id">
						<view class="swiper-item uni-bg-red" >
							<image :src="item.pic"></image>
							<view class="scroll-c">
								<view class="title">{{item.name}}</view>
								<view class="price">价格:{{item.price}}</view>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<!-- 猜你喜欢 -->
		<view class="like">
			<view class="like-head">猜你喜欢</view>
			<view class="like-content">
				<view class="like-item" @click="gogoods(item.id)" v-for="item in saleMost" :key="item.id">
					<image :src="item.pic"></image>
					<view class="likeList">
						<view class="title">{{item.brandName}}</view>
						<view class="price">
							<text>￥{{item.price}}元</text>
							<text>{{item.productCategoryName}}</text>
						</view>
					</view> 
				</view>
									
			</view>
		</view>
	</view>
</template>

<script>
	import {bannerAds,categorys,recommendList,hotList,lejuLatestProducts,saleMostProducts} from "../../api/home/index.js"

	export default{
		data(){
		
		return{
			//轮播数据
			bannerList:[],
			//是否自动切换
			autoplay:true,
			//是否加面板指示点
			indicatorDots:true,
			//间隔时间
			interval:3000,
			//滑动时长
			duration:500,
			//分类列表
			categoryList:[],
			//限时活动列表
			recommend:[],
			//是否为纵向
			vertical:true,
			//热门推荐
			hot:[],
			//新品推荐
			LatestProducts:[],
			//猜你喜欢
			saleMost:[],
		}
		},
		//监听下拉刷新页面(暂时没有实现下拉刷新)
		onPullDownRefresh(){
			uni.stopPullDownRefresh();
		},
		methods:{
			init(){
				
			},
			//点击返回section页面
			gosection(key){
				uni.navigateTo({
					url:`./section/section?id=${key}`,
					
				})
				// console.log(key)
				
			},
			//跳转到goods页面
			gogoods(key){
				console.log(key)
				uni.navigateTo({
					url:`./goods/goods?id=${key}`,
				})
			},
			//跳转到购物车页面
			gocar(){
				uni.navigateTo({
					url:"../mine/car/car",
				})
			}
		},
		onLoad(){
			//获取轮播图
			bannerAds()
			.then(res =>{
				// console.log(res);
				this.bannerList=res.data.items
			})
			//获取分类列表
			categorys("1308336521604599809").then(res=>{
				// console.log(res);
				this.categoryList=res.data.category.children;
			})
			//限时活动列表
			recommendList()
			.then(res=>{
				// console.log(res)
				this.recommend=res.data.items
			})
			//热门推荐
			hotList()
			.then(res=>{
				// console.log(res)
				this.hot=res.data.items
			})
			//新品推荐
			lejuLatestProducts()
			.then(res=>{
				// console.log(res)
				this.LatestProducts=res.data.productList
			})
			//猜你喜欢
			saleMostProducts().then(res=>{
				console.log(res)
				this.saleMost=res.data.items
			})
		}
		
	}
</script>

<style lang="scss" scoped>
	.box{
		width: 100%;
		background-color:#F1ECE7 ;
		.head{
			 height: var(--status-bar-height);
			 width: 90%;
			 padding:15px;
			 position: fixed;
			 top: 0;
			 left: 0;
			 z-index: 999;
			 .tops{
				 width:20%;
				 float: right;
				 display: flex;
				 justify-content: space-between;
				 image{
					 width: 25px;
					 height: 25px;
				 }
			 }
		}
		.banner{
			
			.swiper{
				width: 100%;
				height:516rpx ;
				.swiper-item{
					width: 100%;
					height: 100%;
					.img{
					width: 100%;
					height: 100%;
					img{
						width: 100%;
						height: 100%;
					}
				}
				}
				
				
			}
		}
		.section{
			padding: 30px 15px;
			display: flex;
			justify-content: space-between;
			.sec-item{
				width: 60px;
				image{
				display: block;
				width:40px;
				height: 40px;
				margin: 0 auto;
				}
				view{
					font-size: 16px;
					color: #3e3e3e;
					text-align: center;
					margin-top: 5px;
				}
			}
			
		}
		.time{
			width: 335px;
			height: 48px;
			padding:10px 0px;
			margin:15px auto;
			font-size: 14px;
			line-height: 48px;
			background-color: #fff;
			display: flex;
			justify-content: space-between;
			.time-t{
			width: 24px;
			height: 24px;
			margin-left: 12px;
			margin-top:6px;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.tiem-c{
				width: 67px;
				height: 48px;
				color:#ffaa00 ;
				font-weight: bold;
			}
			.time-b{
				width: 229px;
				height: 48px;
				.swiper{
					width: 100%;
					height: 100%;
					.swiper-item{
						width: 100%;
						height: 100%;
						display: flex;
						justify-content: space-between;
						.item-name{
							width: 60%;
							height: 48px;
							line-height: 48px;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
						}
						.item-price{
							width:40%;
							height: 48px;
							font-size: 12px;
							.pric{
							font-weight: bold;
							width: 100%;
							height: 50%;
							line-height: 24px;
							text-decoration:line-through;
							}
							.promotion{
							color: #ff0000;
							font-weight: bold;
							width: 100%;
							height: 50%;
							line-height: 24px;
							}
						}
						
					}
				}
			}
		}
		.hot{
			padding:15px;
			.hot-head{
				padding: 15px 0;
				font-weight: bold;
				font-size: 16px;
			}
			.hot-content{
				width: 100%;
				// height:100% ;
				uni-swiper .uni-swiper-slides{
					width: 33%;
					height: 100%;
					.head{
						// width: 33%;
						height: 100%;
						padding: 0px;
						margin-right: 20px;
						.swiper-item{
							// width:33%;
							.imag{
								width: 104px;
								height: 88px;
								image{
									width: 100%;
									height: 100%;
								}
							}
							.name{
								width: 100%;
								margin-top: 10px;
								font-size:13px;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}
						}
					}
					
				}
			}
		
		}
		.product{
			padding:0 15px;
			height: 180px;
			.product-head{
				font-weight: bold;
				font-size: 16px;
			}
			.new{
				width: 100%;
				height: 130px;
				white-space: nowrap;
				margin-top: 15px;
				.swiper-item{
					// width: 295px;
					// height: 100%;
					margin-right: 10px;
					padding:20px;
					display: flex;
					justify-content: space-between;
					background-color: #fff;
					image{
						width: 97px;
						height: 84px;
						border-radius:5px;
					}
					.scroll-c{
						width:130px;
						height: 100%;
						margin-left: 20px;
						.title{
							width: 100%;
							height: 36px;
							font-size: 13px;
							color: #3e3e3e;
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							
						}
						.price{
							width: 100%;
							height:30px ;
							font-size: 13px;
							color: #3e3e3e;
							margin-top:20px;
						}
						
					}
				}
			}
			
		}
		.like{
			padding:0 15px;
			.like-head{
				font-weight: bold;
				font-size: 16px;
			}
			.like-content{
				width: 100%;
				margin-top: 20px;
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				.like-item{
					width: 47%;
					height:209px;
					margin-bottom:15px;
					image{
						width: 100%;
						height:119px;
					}
					.likeList{
						// width:126px;
						// height:50px;
						padding:18px ;
						font-size: 13px;
						background-color: #fff;
						.title{
							width: 100%;
							font-weight: bold;
						}
						.price{
							margin-top: 10px;
							display: flex;
							justify-content: space-between;
						}
					}
				}
			}
		}
	}
</style>
